<script>
  import { reactive, toRefs } from "vue";

export default {
  props: ["tabId"],
  setup(props) {
    // console.log(props);
    // 1.构建数据格式 data中
    const todolists = reactive({
      tabId: props.tabId,
    });
    return {
      ...toRefs(todolists),
    };
  },
};
</script>
<template>
  <div>
    <div class="container">
      <div class="container-wrap">
        <div class="justify-between">
          <router-link custom to="/" v-slot="{ href, navigate }"
            ><div
              :href="href"
              @click="navigate"
              :class="['div', { con: tabId == 1 }]"
            >
              <i class="iconfont icon-zhibo1"></i>

              <span>直播</span>
            </div>
          </router-link>
          <router-link custom to="/info" v-slot="{ href, navigate }"
            ><div
              :href="href"
              @click="navigate"
              :class="['div', { con: tabId == 2 }]"
            >
              <i class="iconfont icon-zixun"></i>

              <span>社区</span>
            </div>
          </router-link>
          <router-link custom to="/match" v-slot="{ href, navigate }"
            ><div
              :href="href"
              @click="navigate"
              :class="['div', { con: tabId == 3 }]"
            >
              <i class="iconfont icon-jiangpai"></i>

              <span>赛事</span>
            </div>
          </router-link>
          <router-link custom to="/attent" v-slot="{ href, navigate }"
            ><div
              :href="href"
              @click="navigate"
              :class="['div', { con: tabId == 4 }]"
            >
              <i class="iconfont icon-guanzhu"></i>

              <span>关注</span>
            </div>
          </router-link>
          <router-link custom to="/my" v-slot="{ href, navigate }"
            ><div
              :href="href"
              @click="navigate"
              :class="['div', { con: tabId == 5 }]"
            >
              <i class="iconfont icon-wode"></i>

              <span>我的</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.container-wrap {
  border-top: 1px solid #ededef;
  background-color: #ffffff;
  opacity: 0.98;
  position: fixed;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  background: hsla(0, 0%, 100%, 1);
  box-shadow: 0 1px 0 0 #f1f1f1;
  overflow: hidden;
  overflow-x: scroll;
  text-align: justify;
  z-index: 99;
  padding: 8px 15px;
  .justify-between {
    display: flex;
    justify-content: space-between;
    .div {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #a8a9a9;
      width: 60px;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      .iconfont {
        font-size: 22px;
        margin-bottom: 4px;
      }
     
    }
     .con {
        .iconfont {
          color: #6839e8;
        }
        span {
          color: #6839e8;
        }
      }
  }
}
</style>